<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>inote</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
            integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
            crossorigin="anonymous"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>

</head>
<body style="background: rgb(248, 246, 246);">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12" style="border-radius: 2%;">
            <!--导航栏-->
<%--            <img src="${pageContext.request.contextPath}/img/header.jpg" class="img-responsive" width="100%" />--%>
            <nav class="navbar" style="background: white;height: 55px !important; margin-bottom: 0px !important;">
                <div class="container">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.jsp">iNote</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navbar-example">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="${pageContext.request.contextPath}/index.jsp">首页 <span class="sr-only">(current)</span></a></li>
                            <li><a href="${pageContext.request.contextPath}/specialty/getSpecialty"><span class="glyphicon glyphicon-pencil"></span>记笔记</a>
                            </li>
                        </ul>
                        <!-- 搜索框-->
                        <form class="navbar-form navbar-left">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search" id="search">
                            </div>
                            <button type="button" class="btn btn-default" id="searchbtn">搜索</button>
                        </form>
                        <ul class="nav navbar-nav navbar-right">
                            <li id="login"><a href="${pageContext.request.contextPath}/login.jsp" class="btn"><span class="glyphicon glyphicon-user">登录</span></a></li>
                            <li id="dropdown" class="dropdown hide">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-haspopup="true" aria-expanded="false">${sessionScope.userInfo.userName} <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/enterMyHome">我的主页</a>
                                    </li>
                                    <li><a href="#">我的通知</a></li>
                                    <li><a href="${pageContext.request.contextPath}/changePassword.jsp">修改密码</a>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="/loginOut"><span class="glyphicon glyphicon-grain"></span>退出</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</div>

<script>
    //若登录成功，则隐藏登录按钮选项
    $(document).ready(function () {
        var user = "${sessionScope.userInfo}";
        if(user != ''){
            $("#login").addClass("hide");
            $("#dropdown").removeClass("hide");
        }
    });
</script>
</body>
</html>
